<template>
  <div class="product-list-one">
    <h2>Product-List-one</h2>
    <ul>
      <li v-for="item in saleProducts" :key="item.name">
        <span class="name">{{ item.name }}</span>
        <span class="price">${{ item.price }}</span>
      </li>
    </ul>
    <button @click="reductSale(4)">商品降价</button>
  </div>
</template>

<script>

// 这里是vuex 中提供的方法，把...mapGetters和...mapActions方法放在vuex中
import {mapGetters} from 'vuex'
import {mapActions} from 'vuex'

export default {
  data() {
    return {

    };
  },
  computed: {
    products() {
      return this.$store.state.products
    },
    // saleProducts() {
    //    return this.$store.getters.saleProducts
    // }
    ...mapGetters([
      "saleProducts"
    ])
  },
  methods: {
    reductSale(amout) {
      // this.$store.state.products.forEach(item => {
      //   item.price -= 1;
      // })
      // return this.$store.commit("reductSale")  //mutations方法
      this.$store.dispatch("reductSales", amout)
    }
    // ...mapActions(["reductSale"])
  },
};
</script>

<style lang="less" scoped>
.product-list-one {
  background: #fff8b1;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
  padding: 10px 20px;
  ul {
    padding: 0;
    li {
      display: inline-block;
      margin-right: 10px;
      margin-top: 10px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.7);
      .price {
        font-weight: bold;
        color: #e8800c;
      }
    }
  }
}
</style>
